<template>
  <div class="container">
    <div class="top-box">
      <img v-src="'/static/img/my/vip-top-bg.png'" alt="">
      <p class="top-desc">会员看更多剧</p>
    </div>
    <div class="register-box">
      <img class="dain" style="width: 6.21rem" v-src="'/static/img/my/dian.png'" alt="">
      <div class="text-img">
        <p>您已是老用户啦，邀请新朋友可获得以下奖励:</p>
        <img style="width: 5.88rem" v-src="'/static/img/my/three-month-vip.png'" alt="">
        <div class="registerbtn flex-grow-0 flex-y-center flex-x-center">
          去邀请
        </div>
        <div class="title-box ruler_box">
          <img class="guizeimg" style="width: 3.68rem" v-src="'/static/img/my/h5_guize.png'" alt="">
          <div class="flex-row ruler-item flex-y-center">
            <div class="flex-grow-0">
              <div class="yuan flex-x-center flex-y-center">1</div>
            </div>
            <div class="flex-grow-0 flex-y-center dian-box">
              <span class="dian"></span>
              <span class="dian"></span>
              <span class="dian"></span>
              <span class="dian"></span>
            </div>
            <div class="flex-grow-1 ruler-text">分享您的手机号来邀请好友一起观影看剧。</div>
          </div>
          <div class="flex-row ruler-item flex-y-center">
            <div class="flex-grow-0">
              <div class="yuan flex-x-center flex-y-center">2</div>
            </div>
            <div class="flex-grow-0 flex-y-center dian-box">
              <span class="dian"></span>
              <span class="dian"></span>
              <span class="dian"></span>
              <span class="dian"></span>
            </div>
            <div class="flex-grow-1 ruler-text">好友通过你分享页面注册且输入你的手机号即可获得3个月会员，获得更多观影资源。</div>
          </div>
          <div class="flex-row ruler-item flex-y-center">
            <div class="flex-grow-0">
              <div class="yuan flex-x-center flex-y-center">3</div>
            </div>
            <div class="flex-grow-0 flex-y-center dian-box">
              <span class="dian"></span>
              <span class="dian"></span>
              <span class="dian"></span>
              <span class="dian"></span>
            </div>
            <div class="flex-grow-1 ruler-text">分享好友人数越多，获得会员时间越长，有机会获得永久会员哦。</div>
          </div>
        </div>
      </div>
    </div>
    <div style="text-align: right">
      <img class="bottombg" style="width:3.78rem" v-src="'/static/img/my/bottombg.png'" alt="">
    </div>
  </div>
</template>

<script>
  document.title = '邀请好友领会员';
  export default {
    name: "getVip",
    data() {
      return {
        phone: '',
        code: '',
        password: '',
        yao_qing_phone: '',
        disabled: false,
        code_text: '获取验证码',
        showActive: ''
      }
    },
    methods: {
      getCode() {

      }
    }
  }
</script>
<style>
  body {

  }
</style>
<style scoped lang="less">
  .top-box {
    position: relative;

    .top-desc {
      font-size: .48rem;
      color: #ffe145;
      position: absolute;
      left: 50%;
      top: 1.94rem;
      transform: translateX(-50%);
    }
  }

  .register-box {
    width: 100%;
    border-radius: 20px 20px 0 0;
    background: #fff;
    margin-top: -1.3rem;
    position: relative;

    .dain {
      position: absolute;
      top: .8rem;
      left: 50%;
      transform: translateX(-50%);
    }

    .text-img {
      width: 100%;
      position: relative;
      /*margin-top: 1.3rem;*/
      left: 50%;
      top: 1.3rem;
      transform: translateX(-50%);
      text-align: center;
      padding-bottom: 0.5rem;

      p {
        font-size: .24rem;
        color: #999999;
        margin-bottom: 0.7rem;
      }

      .title-box {
        width: 7.02rem;
        min-height: 1rem;
        border-radius: 10px;
        border: 2px solid #fbb1b7;
        margin: 1rem auto 0.4rem;
        background: #fff;
      }

      .ruler_box {
        position: relative;
        padding-top: .45rem;
        padding-left: .5rem;
        padding-right: .5rem;
        padding-bottom: .15rem;
        text-align: left;
      }
      .guizeimg{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        top: -0.44rem;
      }

      .ruler-item {
        padding: .1rem 0;
      }

      .yuan {
        width: 19px;
        height: 19px;
        border: solid 1px #ed6d77;
        /*line-height: 19px;*/
        /*text-align: center;*/
        border-radius: 50%;
        font-size: .24rem;
        color: #e82730;
      }

      .dian-box {
        padding: 0 0.05rem;

        .dian {
          display: inline-block;
          width: 2px;
          height: 1px;
          background: #ed6d77;
          margin-left: 2px;
        }
      }

      .ruler-text {
        font-size: .24rem;
        color: #333333;
      }

      .registerbtn {
        width: 3.88rem;
        height: .92rem;
        background: url("../../../static/img/my/registerbtnbg.png") no-repeat center center;
        background-size: 100% 100%;
        margin: 1.25rem auto 0;
        font-size: .32rem;
        font-weight: 600;
        color: #e34b01;
      }
    }
  }

  .bottombg {
    /*position: fixed;*/
    /*right: 0;*/
    /*bottom: 0;*/
  }
</style>